<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置发票信息</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="./css/faPiao.css" />
    <script type="text/javascript" src="../../js/base.js"></script>
</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn goBack" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">设置发票信息</div>-->
<!--</header>-->

<section id="app" v-cloak>
    <div v-if="navigator && navigator.onLine === true">
 <div class="piaoType" >
     <div>发票类型</div>
     <div class="aui-flex-col aui-flex-item-12 ">
         <div class="aui-flex-item-3 default-fapiaoType faPiaoType" id="zhiZhi" @click="chooseType(0)">纸质发票</div>
         <div class="aui-flex-item-3 default-fapiaoType" id="dianZi" @click="chooseType(1)" style="background: #ddd;opacity: 0.6">电子发票</div>
         <div class="aui-flex-item-3 default-fapiaoType" id="zengZhi" @click="chooseType(2)" style="background: #ddd;opacity: 0.6">增值发票</div>
     </div>
     <!--<div class="remarks">电子发票与纸质发票具备同等法律效力,可支持报销入账</div>-->
     <div class="remarks">当前只支持纸质发票</div>
 </div>

    <div class="piaoType">
        <div>发票抬头</div>
        <div class="aui-flex-col aui-margin-t-15">
                <label class="aui-flex-item-4"><input class="aui-radio" type="radio" value="0" name="demo1" @click="showMingxi(false)" checked> 不开发票</label>
                <label class="aui-flex-item-4"><input class="aui-radio" type="radio" value="1"  name="demo1" @click="showMingxi(true)"> 明细</label>
        </div>
    </div>

    <div v-show="isShowMingxi" style="margin-bottom: 2rem">
        <div class="piaoType">
            <div>发票抬头</div>
            <div class="aui-flex-col aui-margin-t-15">
                <label class="aui-flex-item-4"><input class="aui-radio" type="radio" name="demo2" @click="isCheckInfo(true)"  checked> 个人</label>
                <label class="aui-flex-item-4"><input class="aui-radio" type="radio" name="demo2" @click="isCheckInfo(false)" > 单位</label>
            </div>
        </div>
        <div class="aui-content">
            <ul class="aui-list aui-form-list" style="background-size:100% 0;margin-bottom:1rem" >
                <li v-if="isCheck" class="aui-list-item " style="width:96%;margin: 0 2%;padding-left:0.5rem">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            收票人信息
                        </div>
                    </div>
                </li>

                <li v-if="!isCheck">
                    <ul>
                        <li class="aui-list-item " style="width:96%;margin: 0 2%;border-top:none;padding-left:0.5rem">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    公司名称:
                                </div>
                                <div class="aui-list-item-input">
                                    <input type="text" placeholder="请输入公司名称" v-model="faPiaoInfo.companyName" >
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item " style="width:96%;margin: 0 2%;padding-left:0.5rem">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:
                                </div>
                                <div class="aui-list-item-input">
                                    <input type="text"  placeholder="请输入税号" v-model="faPiaoInfo.number" >
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>

                <li class="aui-list-item" style="border: none">
                    <div class="aui-list-item-inner" >
                        <div class="aui-list-item-label">
                            收票人手机:
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="可通过手机号码在发票平台查询" v-model="faPiaoInfo.tel">
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <footer class="aui-bar aui-bar-tab">
        <div class="aui-bg-info submitBtn" @click="submitFPInfo()">确&nbsp;&nbsp;认</div>
    </footer>
    </div>
    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -3rem">
            <img src="../../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center">暂无网络</div>
        </div>

        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:15rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="./js/faPiaoOne.js" ></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>
</body>
</html>